<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>佰林の餐品信息</title>
    <link rel="stylesheet" href="/common/layui/css/layui.css">
    <link rel="stylesheet" href="/admin/css/style.css">
    <script src="/common/layui/layui.js"></script>
    <script src="/common/jquery-3.3.1.min.js"></script>
    <script src="/common/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="main">
    <!--左侧数据  -->
    <div id="fixedData">
        <!--顶栏-->
        <header>
            <h1 v-text="webname"></h1>
            <div class="breadcrumb">
                <i class="layui-icon">&#xe715;</i>
                <ul>
                    <li v-for="vo in address">
                        <a v-text="vo.name" :href="vo.url"></a> <span>/</span>
                    </li>
                </ul>
            </div>
        </header>
        <!--左栏-->
        <div class="left">
            <ul class="cl">
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                              class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                           v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--右侧-->
    <div id="Right" class="right">


        <a href="/toCommodityAdd" class="layui-btn"><i class="layui-icon">&#xe654;</i>添加商品</a>

        <table class="layui-table layui-form">
            <colgroup>
                <col width="80">
                <col width="100">
                <col width="100">
                <col>
                <col width="90">
                <col width="90">
                <col width="90">
                <col width="90">
                <col width="90">
                <col width="200">
                <col width="150">
            </colgroup>
            <thead>

            <tr>
                <th>序号</th>
                <th>UUID</th>
                <th>缩略图</th>
                <th>菜品名称</th>
                <th>分类</th>
                <th>价格</th>
                <th>会员价</th>
                <th>库存</th>
                <th>外卖状态</th>
                <th>推荐显示</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="id84" v-for="item,index of commodityList " :key="index">
                <th>{{index+1}}</th>
                <td>{{item.id}}</td>
                <td><img :src=`${item.img}` height="50px"/></td>
                <td>{{item.commodityName}}</td>
                <td>{{item.classification}}</td>
                <td>{{item.price}}</td>
                <td>{{item.vipPrice}}</td>
                <th>{{item.stock}}</th>
                <td> {{item.isShow ? '下架' : '展示'}}</td>
                <td>{{item.isRecommend ? '隐藏' : '推荐'}}</td>
                <td>{{item.createTime}}</td>
                <td>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" @click = "toUpdata(item.id)">修改</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" @click="delUserListInfo(item.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>


        <div class="page">
            <ul class="pagination">
                <li style="cursor: pointer" v-for="(item,i) of dataCount" @click="setActivePage(i+1)"><span >{{i+1}}</span></li>
                <!--                    <div v-for="(item,i) of dataCount" @click="setActivePage(i+1)">{{i+1}}</div>-->
            </ul>
        </div>


    </div>
</div>
<script>
    layui.use('form', function () {
        var form = layui.form, layer = layui.layer, $ = layui.jquery;

        form.on('switch(state)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/state.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(top)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/top.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(experiment)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/experiment.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(works)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/works.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });
    });
</script>
<script src="/admin/js/config.js"></script>
<script>
    let right = new Vue({
        el: '#Right',
        data: {
            commodityList: [],
            webname: webname,
            menu: [],
            status: 0,
            active: 'active',
            address: [],
            activePage: 1,
            dataCount: 10,// 分页数
        },
        methods: {
            /*设置当前页数*/
            setActivePage(index) {
                this.activePage = index;
                this.getCommodityList(this.activePage, this.status)
            },
            //获取一共有多少条数据
            getDataCount() {
                $.ajax({
                    url: 'commodity/select',
                    type: 'post',
                    data: JSON.stringify({
                        status: this.status,
                    }),
                    contentType: "application/json;charset=UTF-8",
                    success: (data) => {
                        if (data) {
                            this.dataCount = Math.ceil(data.length / 10);
                        }
                    }
                })
            },

            //修改跳转
            toUpdata(id) {
                window.location = '/toCommodityUpdate?id=' + id;
            },

            //变化状态
            changeStatus(value, item) {
                item.status = value;
                $.ajax({
                    url: 'showUserList/update',
                    type: 'post',
                    data: JSON.stringify(
                        item
                    ),
                    contentType: "application/json;charset=UTF-8",
                    success: (data) => {
                        changValue = value ? 0 : 1;
                        this.getCommodityList(this.activePage, changValue);
                    }
                })
            },
            //获取商品列表
            getCommodityList(activePage) {
                $.ajax({
                    url: 'commodity/pageSelect',
                    type: 'post',
                    data: JSON.stringify({
                        pageNum: activePage,
                        pageSize: 10
                    }),
                    contentType: "application/json;charset=UTF-8",
                    success: (data) => {
                        this.commodityList = data.result;
                    }
                })
            },
            //删除用户列表的用户信息
            delUserListInfo(id) {
                $.ajax({
                    url: 'commodity/delete',
                    type: 'post',
                    data: JSON.stringify({
                        id: id
                    }),
                    contentType: "application/json;charset=UTF-8",
                    success: (data) => {
                        this.getCommodityList(this.activePage)
                    }
                })
            },
        },
        mounted() {
            this.getCommodityList(this.activePage),
            this.getDataCount()
        },
    })
</script>

</body>
</html>
